<template>
    <n-card class="card-container">
        <n-grid x-gap="12" y-gap="10" :cols="5">
            <n-gi>
                <n-input v-model:value="searchParams.keyword" type="text" placeholder="基本的 Input" />
            </n-gi>
            <n-gi>
                <n-input v-model:value="searchParams.keyword" type="text" clearable placeholder="请输入关键字" />
            </n-gi>
            <n-gi>
                <n-button type="primary" @click="handleSearch">
                    <template #icon>
                        <n-icon>
                            <search-icon />
                        </n-icon>
                    </template>
                    搜索
                </n-button>
            </n-gi>
            <n-gi :span="5" class="grid-item-right">
                <n-button type="info" @click="handleExport">
                    <template #icon>
                        <n-icon>
                            <download-icon />
                        </n-icon>
                    </template>
                    导出内容
                </n-button>
                <n-button type="info" @click="handleAddRouter()">
                    <template #icon>
                        <n-icon>
                            <add-icon />
                        </n-icon>
                    </template>
                    新增
                </n-button>
            </n-gi>
        </n-grid>
    </n-card>
    <n-card class="card-container">
        <n-data-table :columns="columns" :data="dataList" :single-line="false" :pagination="pagination" />
    </n-card>
</template>
<script>
import { h } from "vue";
import { Search as SearchIcon, Add as AddIcon, DownloadOutline as DownloadIcon } from "@vicons/ionicons5";
import { NButton } from "naive-ui";
import EditColumn from "./child/EditColumn.vue";
import { Urls } from "../../utils/Urls";
import { localStorageUtil } from "../../utils/LocalStorageUtil";
import { CpcDrawerCtrl } from "../../components/CpcDrawer/CpcDrawerCtrl";
import AddOrEdit from "./child/AddOrEdit.vue";

export default {
    components: { SearchIcon, AddIcon, DownloadIcon },
    data() {
        const self = this;
        return {
            searchParams: {
                keyword: "",
            },
            pagination: {
                showSizePicker: true,
                pageSizes: [10, 20, 30, 40],
            },
            columns: [
                { title: "路由描述", key: "description", align: "center" },
                { title: "路径路由", key: "path", align: "center" },
                { title: "请求方式", key: "method", align: "center" },
                {
                    title: "是否启用",
                    key: "disable",
                    align: "center",
                    render(row) {
                        return h(
                            NButton,
                            {
                                type: row.disable ? "error" : "primary",
                                ghost: true,
                                size: "small",
                            },
                            { default: () => (row.disable ? "禁止" : "启动") }
                        );
                    },
                },
                {
                    title: "路由编辑",
                    key: "actions",
                    align: "center",
                    render(row) {
                        return h(EditColumn, {
                            datas: row,
                            updateList: self.getAllRouterByProject,
                        });
                    },
                },
            ],
            dataList: [],
        };
    },
    mounted() {
        this.getAllRouterByProject();
    },
    methods: {
        handleSearch() {
            window.$message.success(`搜索：${JSON.stringify(this.searchParams)}`);
        },
        handleAddRouter() {
            CpcDrawerCtrl.open(
                {
                    component: AddOrEdit,
                    callBack: async (data, close) => {
                        data.projectId = localStorageUtil.projectInfo.id;
                        await window.$http.post(Urls.addRouter, data);
                        await this.getAllRouterByProject();
                        window.$message.success("添加成功");
                        close();
                    },
                },
                { title: "添加路由", styles: { width: "500px" }, isMaskEvent: false }
            );
        },
        handleExport() {
            window.$message.success(`export click`);
        },
        async getAllRouterByProject() {
            const res = await window.$http.get(Urls.getAllRouterByProject, {
                params: { id: localStorageUtil.projectInfo.id, page: 1, limit: 10 },
            });
            this.dataList = res.data.list;
            console.log(res);
        },
    },
};
</script>

<style lang="scss" scoped></style>
